<template>
  <div class="content">
    <el-row class="layer-1" :gutter="16">
      <el-col :span="6">
        <div>
          <el-statistic group-separator="," :precision="2" :value="value2" :title="title" />
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic title="销量">
            <template slot="formatter">
              456/2
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
            <template slot="prefix">
              <i class="el-icon-s-flag" style="color: red" />
            </template>
            <template slot="suffix">
              <i class="el-icon-s-flag" style="color: blue" />
            </template>
          </el-statistic>
        </div>

      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic :value="like ? 521 : 520" title="反馈u">
            <template slot="suffix">
              <span class="like" @click="like = !like">
                <i v-show="!!like" class="el-icon-star-on" style="color:red" />
                <i v-show="!like" class="el-icon-star-off" />
              </span> </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="16">
      <el-col :span="8">
        <div id="echart1" />
      </el-col>
      <el-col :span="8">
        <div id="echart2" />
      </el-col>
      <el-col :span="8">
        <div id="echart3" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      like: true,
      value1: 4154.564,
      value2: 2222,
      title: '今年的增长',
      input: 'Hello Element UI!'
    }
  },
  mounted() {
    this.initEcharts()
  },
  methods: {
    initEcharts() {
      const myChart1 = echarts.init(document.getElementById('echart1'))
      const myChart2 = echarts.init(document.getElementById('echart2'))
      const myChart3 = echarts.init(document.getElementById('echart3'))
      const option1 = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      }
      const option2 = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'line'
          }
        ]
      }
      const option3 = {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' },
              { value: 1048, name: 'Search Engine' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart1.setOption(option1)
      myChart2.setOption(option2)
      myChart3.setOption(option3)
    }
  }
}
</script>
<style lang="scss" scoped>
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
.layer-1{
  margin-bottom: 20px;
}
#echart1 {
height: 400px;
width: auto;
}
#echart2 {
height: 400px;
width: auto;
}
#echart3 {
height: 400px;
width: auto;
}
</style>
